<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 10px solid yellow;
        }
    </style>
    <script>

        window.onload = function () {
            var box1 = document.getElementById("box1");
            // alert(box1)
            var btn = document.getElementById("btn01");
            btn.onclick = function () {
                /* 
                
                clientWidth:元素的可见宽度 [不包括边框] 
                clientHeight：元素的可见高度
                属性值是number 所以可以进行运算
                之前有px的，使用parseint取整
                该属性为只读的 不能修改 因为clientWidth=width+padding
                */
                //   box1.clientWidth+=200;
                alert(box1.clientWidth);
                alert(typeof (box1.clientHeight));
                /*                 
                offsetWidth:元素的整个宽度 
                offsetHigth：元素整个高度
                属性值是number 所以可以进行运算
                之前有px的，使用parseint取整
                该属性为只读的 不能修改 
                */
                alert(box1.offsetWidth);
                /*                 
                offsetParent:获取当前元素的定位父元素
                与定位有关
                获取与元素最近的开启了定位的祖先元素  position 不是static
                */

                var op = box1.offsetParent;
                console.log(op)


            }
        }
    </script>
</head>

<body>

    
    <div id="box1">
    </div>
    <button id="btn01">点击</button>
</body>

</html>